<script setup lang="ts" name="ThemeColorSelect">
import { ThemeColorType } from '@/types/theme.d'
const visible = ref(false)

const emits = defineEmits(['colorChange'])

defineProps({
  title: {
    type: String,
    required: true
  },
  themeColor: {
    type: String,
    required: true
  },
  themeDetail: {
    type: Object as PropType<ThemeColorType>,
    required: true
  },
  themeColorList: {
    type: Object as PropType<ThemeColorType[]>,
    required: true
  },
  hotThemeColorList: {
    type: Object as PropType<ThemeColorType[]>,
    required: true
  }
})

const open = () => {
  visible.value = true
}

const colorChange = (color: ThemeColorType) => {
  emits('colorChange', color)
}
</script>

<template>
  <ElButton :plain="true" @click="open"><span :style="{ 'background': themeColor }" /></ElButton>
  <Dialog v-model="visible" class="theme-color-dialog" :title="title" width="94%">
    <ElDivider />
    <slot />
    <div class="theme-color-body">
      <div class="theme-color-wrap">
        <ThemeColorList :hotThemeColorList="hotThemeColorList" :themeColorList="themeColorList" @colorChange="colorChange" />
      </div>
      <div class="theme-color-active">
        <span class="color-name" :style="{ 'color': themeColor }">{{ themeDetail.name }}</span>
        <span class="color-pinyin" :style="{ 'color': themeColor }">{{ themeDetail.pinyin }}</span>
        <span class="select-color" :style="{ 'background': themeColor }" />
      </div>
    </div>
  </Dialog>
</template>

<style scoped lang="scss">
.el-button {
  padding: 6px;

  :deep(span) {
    display: flex;
    flex: 1;
    height: 100%;

    >span {
      display: flex;
      flex: 1;
      height: 100%;
    }
  }
}
</style>

<style lang="scss">
.theme-color-dialog {
  --el-dialog-bg-color: var(--el-fill-color-lighter);

  height: 88vh;
  margin-top: 6vh;

  .el-divider--horizontal {
    margin: 20px 0 !important;
  }

  .color-show{
    display: flex;
    height: 32px;

    .item-color{
      flex: 1;
      cursor: pointer;
    }
  }

  .theme-color-wrap {
    position: relative;
    display: flex;
    flex: 1;
  }

  .theme-color-body {
    display: flex;
    flex: 1;

    .theme-color-active {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 300px;
      padding: 0 0 30px;

      .color-name {
        display: block;
        width: 100px;
        margin: 0 auto;
        font-family: 'Courier New', Courier, monospace;
        font-size: 80px;
        font-weight: bold;
        line-height: 1.3;
        text-align: center;
      }

      .color-pinyin {
        display: block;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 16px;
        text-align: center;
        text-transform: uppercase;
      }

      .select-color {
        display: block;
        width: 100px;
        height: 20px;
        margin-top: 20px;
        border-radius: var(--el-border-radius-base);
      }
    }
  }
}
</style>
